<script setup lang="ts">
  import { reactive,h } from 'vue';
  import { useTable } from '@/hooks/modules/useTable';
  import {type RoleQueryRequest, getList,type RoleQueryResponse ,deleteRows} from '@/api/system/role';
  import type { TableInstanceColumns } from '@/components/BhTable'
  import {Message} from "@arco-design/web-vue";
  import { isMobile } from '@/utils'
  import {AdminRoleCode} from "@/types/const";

  const queryForm = reactive<RoleQueryRequest>({
    name: '',
  });
  const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete,
    selectedKeys,
    rowSelection
  } = useTable((page) => getList({ ...queryForm, ...page }), {
    immediate: true,
  });
  const columns: TableInstanceColumns[] = [
    {
      title: '序号',
      width: 66,
      align: 'center',
      render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    },
    { title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
    { title: '编码', dataIndex: 'code', ellipsis: true, tooltip: true },
    { title: '数据权限', dataIndex: 'dataScope', slotName: 'dataScope', ellipsis: true, tooltip: true },
    { title: '排序', dataIndex: 'sort', align: 'center', show: false },
    { title: '系统内置', dataIndex: 'isSystem', slotName: 'isSystem', align: 'center', show: false },
    { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
    { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
    { title: '创建时间', dataIndex: 'createTime', width: 180 },
    { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
    { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
    {
      title: '操作',
      dataIndex: 'handle',
      slotName: 'handle',
      width: 200,
      align: 'center',
      fixed: !isMobile() ? 'right' : undefined,
    },
  ]
  const reset = () => {
    queryForm.name = undefined
    search()
  }

  const deleteSelectRows = async () => {
    if (selectedKeys.value.length <= 0) {
      Message.error('请选择数据');
    }
  };
  const emits = defineEmits(['openAdd', 'openUpdate', 'openGrantRole']);
  const deleteRow = (record: RoleQueryResponse) => {
    return handleDelete(() => deleteRows(record.id), {
      content: `是否确定删除角色「${record.name}(${record.code})」？`,
      showModal: true,
    })
  }
</script>

<template>
  <div class="bh-container">
    <BhTable
      title="基础表格"
      row-key="id"
      v-model:selected-keys="selectedKeys"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :data="dataList as []"
      :columns="columns"
       @refresh="search"
      :loading="loading"
      :pagination="pagination"
      :row-selection="rowSelection"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
    >
      <template #top>
        <query-header :model="queryForm"
                      label-align="left"
                      @submit="search"
                      @reset="reset"
                      @keyup.enter="() => search()">
          <!-- 角色名称 -->
          <a-form-item field="name" label="角色名称">
            <a-input v-model="queryForm.name"
                     placeholder="请输入角色名称"
                     allow-clear />
          </a-form-item>

        </query-header>

      </template>
      <template #toolbar-left>
        <a-space>
          <a-button
              v-permission="['sys:role:add']"
              type="primary"
              @click="emits('openAdd')"
          >
            <template #icon>
              <icon-plus />
            </template>
            {{ $t('common.create') }}
          </a-button>
          <a-button
              v-permission="['sys:role:delete']"
              type="primary"
              status="danger"
              :disabled="selectedKeys.length === 0"
              @click="deleteSelectRows"
          >
            <template #icon>
              <icon-delete />
            </template>
            {{ $t('common.delete') }}
          </a-button>
        </a-space>
      </template>


      <!-- 操作 -->
      <template #handle="{ record }">
        <!-- 修改 -->
        <a-button
            v-permission="['sys:role:edit']"
            type="text"
            size="mini"
            @click="emits('openUpdate', record)"
        >
          修改
        </a-button>
        <!-- 分配权限 -->
        <a-button
            v-permission="['sys:role:permission']"
            type="text"
            size="mini"
            @click="emits('openGrantRole', record)"
        >
          分配权限
        </a-button>
        <!-- 删除 -->
          <a-button
              v-permission="['sys:role:delete']"
              type="text"
              size="mini"
              status="danger"
              @click="deleteRow(record)"
              :disabled="record.code === AdminRoleCode"
          >
            删除
          </a-button>
      </template>

    </BhTable>
  </div>
</template>

<style scoped lang="less"></style>
